import React from 'react';
import { Button, Checkbox, Form, Input, Space, Divider, notification } from 'antd';

import {
  UserOutlined,
  StarOutlined,
  KeyOutlined,
  QuestionCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons';
import './Login.scss'
import { useNavigate } from 'react-router-dom';
import { yewutable_login } from '../../api/yewutable';
interface Props { }
function Login(props: Props) {
  var navigate = useNavigate()
  let suiji: any = []
  suiji = [Math.floor(Math.random() * 10), Math.floor(Math.random() * 10), Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)]


  // 登录
  var login = async (can: any) => {
    var res = await yewutable_login(can)
    console.log(res.data)

    if (res.data.length > 0) {
      // 跳路由

      // 提示
      notification.success({
        type: 'success',
        message: '登录成功'
      })
    }
  }


  const onFinish = (values: any) => {
    console.log('Success:', values);
    delete values.yanzheng
    console.log(values)
    login(values)
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  //=手机号校验
  var userValidator = (rule: any, value: string, callback: any) => {
    if (/^1[3-9]\d{9}$/.test(value)) {
      callback();
    } else {
      callback(new Error('请输入正确的手机号!'))
    }
  }
  //===验证码
  var userYan = (rule: any, value: string, callback: any) => {
    if (value == suiji.join('')) {
      callback();
    } else {
      callback(new Error('请输入正确的验证码!'))
    }
  }
  return (
    <div className='login'>
      <div className='center'>
        <div className='left'>
          <div className='top'>
            <img src="https://cdn7.axureshop.com/demo/1568099/images/%E9%A6%96%E9%A1%B5_1/u2731.png" alt="" />
            <h2>政务服务网上办事大厅</h2>
          </div>
          <div className='bottom'>
            <img src="https://cdn7.axureshop.com/demo/1568099/images/%E7%99%BB%E5%BD%95/u6537.png" alt="" />
          </div>
        </div>
        <div className='right'>
          <h2>用户登录</h2>
          <div style={{ width: '80%' }}>
            <Space direction="vertical" size="large">
              <Form
                name="basic"

                wrapperCol={{ span: 24 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  name="username"
                  rules={[{ required: true, validator: userValidator }]}
                >
                  <Input placeholder='请输入手机号' prefix={<UserOutlined />} size="large" />
                </Form.Item>

                <Form.Item
                  name="password"
                  rules={[{ required: true, message: 'Please input your password!' }]}
                >
                  <Input.Password placeholder='请输入密码' prefix={<KeyOutlined />} size="large" />
                </Form.Item>

                <Form.Item
                  name="yanzheng"
                  rules={[{ required: true, validator: userYan }]}
                >
                  <div className='yanzheng'>
                    <Input placeholder='请输入验证码' prefix={<QuestionCircleOutlined />} size="large" />
                    <div className='ma'>
                      {
                        suiji.map((item: any, index: any) => {
                          console.log(item)
                          return (
                            // rgb(100,${item*10},${item*10}})
                            <span style={{ transform: `scale(${item / 10 + 1}) rotate(${item}deg)`, color: `rgb(${item * 10},${item * 20},${item * 10})`, fontWeight: 'bold' }} key={index}>{item}</span>

                          )
                        })

                      }
                    </div>
                  </div>
                </Form.Item>




                <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                  <Button block size="large" type="primary" htmlType="submit">
                    登录
                  </Button>
                </Form.Item>
              </Form>


            </Space>

            <Button onClick={() => { navigate('/register') }} type="link">没有账号？去注册</Button>
            <Divider orientation="center" plain>
              版权所有，侵权必究
            </Divider>
          </div>

          {/* <div style={{width:'80%'}}>
                <Space direction="vertical" size="large">
               <Input maxLength={11} onChange={(e)=>{phone(e.target.value)}} status=""  placeholder='请输入手机号' prefix={<UserOutlined />} size="large" />
            
             
               <Input.Password  placeholder='请输入密码'  prefix={<KeyOutlined />} size="large" />
             
             
               <div className='yanzheng'>
               <Input  placeholder='请输入验证码' prefix={<QuestionCircleOutlined />} size="large" />
               <div className='ma'>
                {
                    suiji.map((item:any,index:any)=>{
                        console.log(item)
                        return (
                            // rgb(100,${item*10},${item*10}})
               <span style={{transform: `scale(${item/10+1}) rotate(${item}deg)`,color:`rgb(${item*10},${item*20},${item*10})`,fontWeight:'bold'}}  key={index}>{item}</span>

                        )
                    })

                }
               </div>
               </div>
              
               <Button disabled={true} size='large' type="primary" block>
      登录
    </Button>
    <Button type="link">没有账号？去注册</Button>
    <Divider orientation="center" plain>
      版权所有，侵权必究
    </Divider>
               </Space>
                </div> */}
        </div>
      </div>
    </div>
  );
}

export default Login;